<template>
    <div>
        <el-table
                :data="tableData"
                stripe
                border
                style="width: 100%">

            <el-table-column v-if="selectionCol"
                             type="selection"
                             fixed="left"
                             align="center"
                             width="55">
            </el-table-column>

            <el-table-column
                    type="index"
                    :index="indexMethod"
                    fixed="left"
                    align="center"
                    width="50">
            </el-table-column>

            <el-table-column
                    property="icon"
                    width="50"
                    align="center"
                    label="图标">
                <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                        <i :class="scope.row.icon"></i>
                    </div>
                </template>
            </el-table-column>

            <el-table-column
                    property="name"
                    align="center"
                    label="模块名称">
            </el-table-column>

            <el-table-column
                    property="code"
                    align="center"
                    label="模块代码">
            </el-table-column>

<!--            <el-table-column-->
<!--                    property="type"-->
<!--                    align="center"-->
<!--                    label="资源类型">-->
<!--                <template slot-scope="scope">-->
<!--                    <div slot="reference" class="name-wrapper">-->
<!--                        {{ scope.row.type | ViewWidgetTypeFilter}}-->
<!--                    </div>-->
<!--                </template>-->
<!--            </el-table-column>-->

<!--            <el-table-column-->
<!--                    property="type"-->
<!--                    align="center"-->
<!--                    label="终端类型">-->
<!--                <template slot-scope="scope">-->
<!--                    <div slot="reference" class="name-wrapper">-->
<!--                        {{ scope.row.scene | ViewWidgetSceneFilter}}-->
<!--                    </div>-->
<!--                </template>-->
<!--            </el-table-column>-->

            <el-table-column
                    v-if="scene === 'PC'"
                    property="parentName"
                    align="center"
                    label="所属模块">
            </el-table-column>

            <!--<el-table-column-->
            <!--property="url"-->
            <!--label="连接"-->
            <!--width="120">-->
            <!--</el-table-column>-->

            <el-table-column
                    property="roles"
                    align="center"
                    min-width="105"
                    label="所属角色">
                <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                        {{ scope.row.roles | rolesFilter}}
                    </div>
                    <!--<el-tag v-for="item in  scope.row.roles" size="mini" >{{item}}</el-tag>-->
                </template>
            </el-table-column>

            <el-table-column
                    property="enabled"
                    align="center"
                    width="90"
                    label="是否可用">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.enabled" size="medium" type="success">{{ scope.row.enabled | enabledFilter }} </el-tag>
                    <el-tag v-else="scope.row.enabled" size="medium" type="info">{{ scope.row.enabled | enabledFilter }}
                    </el-tag>
                </template>
            </el-table-column>


            <el-table-column
                    property="rank"
                    align="center"
                    width="65"
                    label="排序号">
            </el-table-column>

            <el-table-column
                    fixed="right"
                    label="操作"
                    align="center"
                    width="100">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="editHandle(scope.row)">修改</el-button>
<!--                    <el-button @click="editHandle(scope.row)" type="text" size="small">编辑</el-button>-->
                    <!--<el-button @click="deleteHandle(scope.row)" type="text" size="small">删除</el-button>-->
                </template>
            </el-table-column>

        </el-table>
        <div class="pagination">
            <el-pagination
                    @current-change="handleCurrentChange"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="pageTotal">
            </el-pagination>
        </div>
    </div>
</template>

<script>

    export default {
        mounted() {
            this.loadData({scene:this.viewWidget});
        },
        components: {
            //引用组件
        },
        props: {
            viewWidget:{
                type: String,
                required: true
            }
            //组件参数
        },
        filters: {
            parent: function (val) {
                if (val) {
                    return val.unitName;
                }
                return '无';
            },
            /**
             * @return {string}
             */
            ViewWidgetSceneFilter(val){
                if (!val || val.length === 0) {
                    return "";
                }
                switch (val) {
                    case "PC":
                        return "PC端";
                    case "MOBILE":
                        return "移动端";
                    default :
                        return "未知终端";
                }
            },
            /**
             * @return {string}
             */
            ViewWidgetTypeFilter: function (val) {
                if (!val || val.length === 0) {
                    return "";
                }
                switch (val) {
                    case "NAV_BAR":
                        return "导航栏";
                    default:
                        return "未知的ViewWidgetTypeFilter";
                }
            },
            /**
             * @return {string}
             */
            rolesFilter: function (val) {
                if (!val || val.length === 0) {
                    return "";
                }

                let content = "";
                val.forEach(function (val, index) {
                    let text = "";
                    switch (val) {
                        case "ADMIN":
                            text = "管理员 / ";
                            break;
                        case "AGENCY":
                            text = "代理 / ";
                            break;
                        case "BLOC":
                            text = "集团 / ";
                            break;
                        case "BRAND":
                            text = "品牌 / ";
                            break;
                        case "AREA":
                            text = "区域 / ";
                            break;
                    }
                    content += text;
                });
                return content;
            },
            enabledFilter: function (val) {
                if (val) {
                    return "可用";
                }
                return "禁用";
            }

        },
        data() {
            return {
                scene: undefined,
                selectionCol: false,
                tableData: [],
                currentPage: 1,
                pageTotal: 0,
                pageSize: 10,
            }
        },
        computed: {
            //计算属性
        },
        methods: {
            /*索引排序*/
            indexMethod(index) {
                if (this.currentPage > this.pageTotal / this.pageSize) {
                    if (this.pageTotal % this.pageSize === 0) {
                        this.currentPage = parseInt(this.pageTotal / this.pageSize);
                    } else {
                        this.currentPage = parseInt(this.pageTotal / this.pageSize) + 1;
                    }
                }
                return index + this.pageSize * (this.currentPage - 1) + 1;
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.loadData({scene:this.viewWidget});
            },
            loadData: function (filter) {
                let _this = this;
                let params = Object.assign({}, {
                    pageSize: _this.pageSize,
                    pageNo: _this.currentPage
                }, filter);


                this.$ajax.get("auth/view_widget/paging", {
                    params: params,

                }).then(res => {
                    _this.tableData = res.data.rows;
                    _this.pageTotal = res.data.total;
                })
            },
            editHandle: function (data) {
                this.$emit('onEdit', data);
            },
            /**
             *  模块删除
             */
            deleteHandle: function (row) {
                let _this = this;
                this.$confirm('你真的删除这【' + row.unitName + '】个模块吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    _this.$ajax.delete('/auth/view_widget/sync', {
                        data: {
                            id: row.id
                        }
                    }).then(res => {
                        if (res.code !== "ok") {
                            _this.$message.error(res.msg);
                        } else {
                            _this.loadData();
                        }
                    });
                })
            },
        },
        watch: {
            // data / props 属性观察
            viewWidget(val){
                if (val !== this.scene) {
                    this.scene = val;
                }

            },
        },
        beforeDestroy() {
            //组件销毁之前调用
        }
    }
</script>

<style scoped>

</style>
